import React, {useEffect, useState} from 'react';
import {Send, Trash2, X} from 'lucide-react';
import {Req} from '../../util/fetch';

interface Comment {
  id: number;
  content: string;
  user: {
    realname: string;
    avatarUrl: string;
    roleName: string;
    position: string;
    type: string;
  };
  crtTime: string;
}

interface Training {
  id: number;
  title: string;
}

interface CommentManageModalProps {
  training: Training;
  onClose: () => void;
}


export default function CommentManageModal({ training, onClose }: CommentManageModalProps) {
  const [comments, setComments] = useState<Comment[]>([]);
  const [newComment, setNewComment] = useState('');

  const handleAddComment = async () => {
    if (newComment && newComment.trim()) {
      const body = {
        trainId: training.id,
        content: newComment.trim()
      }
      const res = await Req('/bsTrainComment/add', {
        method: 'POST', body,
        headers: undefined
      })
      if (res.success) {
        setNewComment('');
        queryList()
        alert('评论成功')
      } else {
        alert(res.message)
      }
    } else {
      alert('评论内容不能为空')
    }
  };

  const handleDeleteComment = async (id: number) => {
    await Req(`/bsTrainComment/batch?ids=${id}`, {method: 'DELETE'});
    queryList()
    alert('删除成功')
  };

  const queryList = async () => {
    const res = await Req(`/bsTrainComment/list?trainId=${training.id}`)
    if (res.success) {
      setComments(res.data)
    } else {
      alert(res.message)
    }
  };

  useEffect(() => {
    queryList()
  }, [])

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center">
      <div className="bg-white rounded-lg w-full max-w-4xl mx-4 max-h-[90vh] flex flex-col">
        <div className="flex items-center justify-between p-4 border-b">
          <h3 className="text-lg font-semibold text-gray-900">评论管理</h3>
          <button onClick={onClose}>
            <X className="w-6 h-6 text-gray-500" />
          </button>
        </div>

        <div className="flex-1 overflow-y-auto p-6">
          <div className="space-y-4">
            {comments.map(comment => (
              <div
                key={comment.id}
                className="flex space-x-4 p-4 bg-gray-50 rounded-lg"
              >
                <img
                    src={comment.user.avatarUrl}
                    className="w-11 h-11 rounded-full"
                />
                <div className="flex-1">
                  <div className="flex items-center justify-between">
                    <div>
                      <span className="font-medium text-gray-900">
                        {comment.user.realname}
                      </span>
                      <span className="text-sm text-gray-500 ml-2">
                        {/*({comment.user.roleName? comment.user.roleName : '暂无角色'})*/}
                        ({comment.user.type == '0' ? '管理员' : comment.user.position})
                      </span>
                    </div>
                    <button
                      onClick={() => handleDeleteComment(comment.id)}
                      className="p-1 text-gray-400 hover:text-red-500"
                    >
                      <Trash2 className="w-5 h-5" />
                    </button>
                  </div>
                  <p className="text-gray-700 mt-1">{comment.content}</p>
                  <div className="text-sm text-gray-500 mt-2">
                    {comment.crtTime}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* 添加评论 */}
        <div className="p-4 border-t">
          <div className="flex space-x-2">
            <input
              type="text"
              value={newComment}
              onChange={(e) => setNewComment(e.target.value)}
              className="flex-1 px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
              placeholder="输入评论内容..."
            />
            <button
              onClick={handleAddComment}
              className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 flex items-center"
            >
              <Send className="w-5 h-5 mr-2" />
              发送
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}